<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"   />
    <link rel="stylesheet" href="../../res/css/mz.css" />
    <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
    <script src="https://cdn.bootcss.com/xlsx/0.14.2/xlsx.full.min.js"></script>
    <script src="../../res/js/mz.common.js"></script>
    <script src="../../res/js/mz.list.js"></script>
    <style>
        .layui-input-inline .layui-input{display: inline-block; width: 200px;}
    </style>
</head>
<body>

<div style=" margin: 10px auto;">
    <div class="layui-input-inline">
        <input id="key" type="text" class="layui-input" placeholder="输入关键字" />
        <button onclick="query()" class="layui-btn layui-btn-success layui-btn-sm"><i class="layui-icon layui-icon-search"></i>查询</button>
    </div>
    <button onclick="exportReport()" class="layui-btn layui-btn-success layui-btn-sm"><i class="layui-icon layui-icon-export"></i>导出</button>
</div>

<div style=" margin: 10px auto;">
    <table id="table_view"></table>
</div>

<script type="text/html" id="operationDemo">
</script>

<script>

    layui.use(['jquery'], function(){
        layui.$.get(base_url + '/report_form_get/' + getQueryString('id'), function(res){
            if(res.content){
                loadTable(res.content.title, res.content.mapping_uri, JSON.parse(res.content.fields));
            }
        })
    });


    function loadTable(title, url, field_setting) {

        // field_setting.unshift({type: 'checkbox', fixed: 'left'});

        // field_setting.push({fixed: 'right', title: '操作', width: 220, align:'center', toolbar: '#operationDemo'});

        window.listObj = new MZList({
            title: title,
            elem: '#table_view',
            url: base_url + '/' + url,  //数据接口
            where: {
                title: '%',                         //自定义查询字段
            },
            cols: [field_setting],
            toolbarEvents: {
            }
        });
    }

    function query() {
        var key = layui.$("#key").val();
        key = '%' + key + '%';
        //根据条件查询，需要数据接口查询语句有如下参数（eg : ‘title’）
        listObj.reload( {where : {title: key}} )
    }
    
    function exportReport() {
        var config = window.listObj.config;
        var cols = {};
        for(var i in config.cols[0]){
            cols[config.cols[0][i].field] = config.cols[0][i].title;
        }
        layui.$.get(config.url, function (res) {
            window.exportData(res.content, cols, config.title + ".xls");
        })
    }

</script>

</body>
</html>
